<template>
  <div class="hospital-ranking">
    <el-form :inline="true" :model="hospital" class="demo-form-inline">
      <el-form-item label="">
        <el-input v-model="hospital.hospitalName" placeholder="输入地区、医院、科室、疾病"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="ranking-header">
      <h1>中国前十医院排行榜</h1>
      <p>各省市医院专科能力排名 复旦大学医学管理研究所认证</p>
    </div>
    <div class="hospital-list">
      <div v-for="(hospital, index) in hospitals" :key="index" class="hospital-item " @click="goToHospitalDetail(hospital.hospitalId)">
        <div v-if="index < 3" :class="['badge', getBadgeClass(index)]">{{ index + 1 }}</div>
        <div v-else class="hospital-ranking-number">{{ index + 1 }}</div>
        <div class="hospital-info">
          <h2>{{ hospital.hospitalName }}</h2>
          <p>等级:
            <span class="hospital-grade" v-if="hospital.hospitalLevel == 0">
              三甲
            </span>
            <span class="hospital-grade" v-if="hospital.hospitalLevel == 1">
              二甲
            </span>
            <span class="hospital-grade" v-if="hospital.hospitalLevel == 2">
              一甲
            </span>
          </p>
          <p>排名: <span class="hospital-rank">{{ hospital.nationalRank }}</span></p>
          <p>医生: <span class="hospital-doctors">{{ hospital.dockerNum }}</span>位</p>
          <p>类型:
            <span class="hospital-type" v-if="hospital.hospitalType == 0">
              综合医院
            </span>
            <span class="hospital-type" v-if="hospital.hospitalType == 1">
              肿瘤医院
            </span>
            <span class="hospital-type" v-if="hospital.hospitalType == 2">
              口腔医院
            </span>
            <span class="hospital-type" v-if="hospital.hospitalType == 3">
              妇产医院
            </span>
            <span class="hospital-type" v-if="hospital.hospitalType == 4">
              中医医院
            </span>
            <span class="hospital-type" v-if="hospital.hospitalType == 5">
              精神病医院
            </span>
            <span class="hospital-type" v-if="hospital.hospitalType == 6">
              传染病医院
            </span>
            <span class="hospital-type" v-if="hospital.hospitalType == 7">
              儿童医院
            </span>
            <span class="hospital-type" v-if="hospital.hospitalType == 8">
              康复医院
            </span>
            <span class="hospital-type" v-if="hospital.hospitalType == 9">
              五官医院
            </span>
            <span class="hospital-type" v-if="hospital.hospitalType == 10">
              其他医院
            </span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {findHospital} from "@/api/hospital/hospital";

export default {
  data() {
    return {
      hospitals: [],
      filteredHospitals: [],
      searchQuery: '',
      hospital:{},
    };
  },
  created() {
    this.findHospitalList()
  },
  methods: {
    onSubmit(){
      findHospital(this.hospital).then(response =>{
        this.hospitals = response.data.rows;
      })
    },
    goToHospitalDetail(hospitalId){
      //跳转页面
      console.log("传递出的参数为："+hospitalId)
      uni.navigateTo({
        url: '/pages/hospital/hospitalDetail?hospitalId=' + hospitalId
      });
    },
    findHospitalList(){
      findHospital().then(response => {
        this.hospitals = response.data.rows;
      });
    },
    filterHospitals() {
      const lowerQuery = this.searchQuery.toLowerCase();
      this.filteredHospitals = this.hospitals.filter(hospital =>
          hospital.name.toLowerCase().includes(lowerQuery) ||
          hospital.grade.toLowerCase().includes(lowerQuery) ||
          hospital.rank.toLowerCase().includes(lowerQuery) ||
          hospital.type.toLowerCase().includes(lowerQuery)
      );
    },
    getBadgeClass(index) {
      switch (index) {
        case 0: return 'gold';
        case 1: return 'silver';
        case 2: return 'bronze';
        default: return '';
      }
    }
  }
}
</script>

<style lang="scss">
.hospital-ranking {
  font-family: 'Arial', sans-serif;
  padding: 20px;
  background-color: #f9f9f9;

  .search-bar {
    width: 100%;
    max-width: 600px;
    padding: 12px 20px;
    margin: 0 auto 30px;
    display: block;
    border: 2px solid #ddd;
    border-radius: 25px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: border-color 0.3s, box-shadow 0.3s;

    &:focus {
      border-color: #4CAF50;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      outline: none;
    }

    &::placeholder {
      color: #aaa;
    }
  }

  .ranking-header {
    text-align: center;
    margin-bottom: 20px;

    h1 {
      font-size: 24px;
      margin: 0 0 10px;
      color: #333;
    }

    p {
      font-size: 14px;
      color: #666;
    }
  }

  .hospital-list {
    max-width: 800px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;

    .hospital-item {
      display: flex;
      align-items: center;
      padding: 15px 20px;
      border-bottom: 1px solid #eee;

      &:last-child {
        border-bottom: none;
      }

      .badge {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
        position: relative;
        margin-right: 20px;

        &.gold {
          background-color: gold;
        }

        &.silver {
          background-color: silver;
        }

        &.bronze {
          background-color: #CD7F32; /* 铜色 */
        }

        &::before, &::after {
          content: '';
          position: absolute;
          width: 10px;
          height: 10px;
          background-color: inherit;
          border-radius: 50%;
          transform: rotate(45deg);
        }

        &::before {
          top: -5px;
          left: 20px;
        }

        &::after {
          top: 20px;
          left: -5px;
        }
      }

      .hospital-ranking-number {
        font-size: 24px;
        font-weight: bold;
        color: #333;
        margin-right: 20px;
      }

      .hospital-info {
        text-align: left;

        h2 {
          margin: 0;
          font-size: 18px;
          color: #333;
        }

        p {
          margin: 5px 0;
          font-size: 14px;
          color: #555;
        }

        .hospital-grade, .hospital-rank {
          color: #4CAF50;
        }
      }
    }
  }
}
</style>
